<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default}">
<head>
    <title>销售目标管理</title>
    <style>
        .targets-container {
            padding: 20px;
        }
        .target-card {
            margin-bottom: 20px;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 15px;
        }
        .target-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .target-progress {
            margin: 15px 0;
        }
        .progress {
            height: 10px;
            border-radius: 5px;
            background-color: #e9ecef;
            overflow: hidden;
        }
        .progress-bar {
            height: 100%;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }
        .progress-bar.success {
            background-color: var(--success-color);
        }
        .progress-bar.warning {
            background-color: var(--warning-color);
        }
        .progress-bar.danger {
            background-color: var(--danger-color);
        }
        .target-meta {
            display: flex;
            justify-content: space-between;
            color: #6c757d;
            font-size: 14px;
        }
        .target-filters {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .target-filter {
            flex: 1;
            min-width: 200px;
        }
        .target-stats {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        .stat-card {
            padding: 15px;
            border-radius: 5px;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin: 10px 0 5px;
        }
        .stat-label {
            color: #6c757d;
            font-size: 14px;
        }
        .modal-body {
            max-height: 500px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="targets-container">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">销售目标管理</h2>
                    <button class="btn btn-primary" onclick="showAddTargetModal()">添加销售目标</button>
                </div>
                <div class="card-body">
                    <div class="target-stats">
                        <div class="stat-card">
                            <div class="stat-label">总目标数</div>
                            <div class="stat-value">12</div>
                            <div>当前活跃目标</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-label">已完成目标</div>
                            <div class="stat-value">5</div>
                            <div>完成率 41.7%</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-label">总销售目标</div>
                            <div class="stat-value">¥1,200,000</div>
                            <div>所有目标总和</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-label">已实现销售额</div>
                            <div class="stat-value">¥780,000</div>
                            <div>达成率 65%</div>
                        </div>
                    </div>
                    
                    <div class="target-filters">
                        <div class="target-filter">
                            <label for="filterType">目标类型</label>
                            <select id="filterType" class="form-control">
                                <option value="">所有类型</option>
                                <option value="销售额">销售额</option>
                                <option value="客户数">客户数</option>
                                <option value="成交数">成交数</option>
                            </select>
                        </div>
                        <div class="target-filter">
                            <label for="filterPeriod">时间周期</label>
                            <select id="filterPeriod" class="form-control">
                                <option value="">所有周期</option>
                                <option value="monthly">月度</option>
                                <option value="quarterly">季度</option>
                                <option value="yearly">年度</option>
                            </select>
                        </div>
                        <div class="target-filter">
                            <label for="filterStatus">状态</label>
                            <select id="filterStatus" class="form-control">
                                <option value="">所有状态</option>
                                <option value="active">进行中</option>
                                <option value="completed">已完成</option>
                                <option value="expired">已过期</option>
                            </select>
                        </div>
                        <div class="target-filter">
                            <label for="filterAssignee">负责人</label>
                            <select id="filterAssignee" class="form-control">
                                <option value="">所有负责人</option>
                                <option value="1">个人</option>
                                <option value="2">团队</option>
                            </select>
                        </div>
                    </div>
                    
                    <div id="target-list">
                        <!-- 示例销售目标 -->
                        <div class="target-card">
                            <div class="target-header">
                                <h3>第三季度销售目标</h3>
                                <span class="badge badge-primary">进行中</span>
                            </div>
                            <p>核心销售团队的第三季度销售额目标</p>
                            <div class="d-flex justify-content-between">
                                <div>
                                    <strong>类型:</strong> 销售额
                                </div>
                                <div>
                                    <strong>目标金额:</strong> ¥500,000
                                </div>
                                <div>
                                    <strong>已完成:</strong> ¥325,000
                                </div>
                            </div>
                            <div class="target-progress">
                                <div class="progress">
                                    <div class="progress-bar" style="width: 65%"></div>
                                </div>
                                <div class="d-flex justify-content-between mt-1">
                                    <span>0%</span>
                                    <span>进度: 65%</span>
                                    <span>100%</span>
                                </div>
                            </div>
                            <div class="target-meta">
                                <div>负责团队: 核心销售团队</div>
                                <div>截止日期: 2023-09-30</div>
                            </div>
                            <div class="d-flex justify-content-end mt-3">
                                <button class="btn btn-sm btn-info mr-2" onclick="updateProgress(1)">更新进度</button>
                                <button class="btn btn-sm btn-primary mr-2" onclick="editTarget(1)">编辑</button>
                                <button class="btn btn-sm btn-danger" onclick="deleteTarget(1)">删除</button>
                            </div>
                        </div>
                        
                        <div class="target-card">
                            <div class="target-header">
                                <h3>新客户开发目标</h3>
                                <span class="badge badge-success">已完成</span>
                            </div>
                            <p>新市场拓展团队的月度客户开发目标</p>
                            <div class="d-flex justify-content-between">
                                <div>
                                    <strong>类型:</strong> 客户数
                                </div>
                                <div>
                                    <strong>目标数量:</strong> 15个
                                </div>
                                <div>
                                    <strong>已完成:</strong> 18个
                                </div>
                            </div>
                            <div class="target-progress">
                                <div class="progress">
                                    <div class="progress-bar success" style="width: 100%"></div>
                                </div>
                                <div class="d-flex justify-content-between mt-1">
                                    <span>0</span>
                                    <span>进度: 120%</span>
                                    <span>15</span>
                                </div>
                            </div>
                            <div class="target-meta">
                                <div>负责团队: 新市场拓展团队</div>
                                <div>截止日期: 2023-07-31</div>
                            </div>
                            <div class="d-flex justify-content-end mt-3">
                                <button class="btn btn-sm btn-primary mr-2" onclick="editTarget(2)">编辑</button>
                                <button class="btn btn-sm btn-danger" onclick="deleteTarget(2)">删除</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 添加/编辑销售目标模态框 -->
        <div id="targetModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000;">
            <div style="background-color: white; margin: 5% auto; width: 600px; border-radius: 5px; overflow: hidden;">
                <div style="background-color: var(--primary-color); color: white; padding: 15px 20px;">
                    <h3 id="targetModalTitle">添加销售目标</h3>
                </div>
                <div class="modal-body" style="padding: 20px;">
                    <form id="targetForm">
                        <div class="form-group">
                            <label for="targetName">目标名称</label>
                            <input type="text" class="form-control" id="targetName" required>
                        </div>
                        <div class="form-group">
                            <label for="targetDescription">目标描述</label>
                            <textarea class="form-control" id="targetDescription" rows="2"></textarea>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="targetType">目标类型</label>
                                <select class="form-control" id="targetType" required>
                                    <option value="销售额">销售额</option>
                                    <option value="客户数">客户数</option>
                                    <option value="成交数">成交数</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="targetValue">目标值</label>
                                <input type="number" class="form-control" id="targetValue" min="1" required>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="targetPeriod">周期类型</label>
                                <select class="form-control" id="targetPeriod" required>
                                    <option value="monthly">月度</option>
                                    <option value="quarterly">季度</option>
                                    <option value="yearly">年度</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="targetDeadline">截止日期</label>
                                <input type="date" class="form-control" id="targetDeadline" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="targetAssignee">分配给</label>
                            <select class="form-control" id="targetAssignee" required>
                                <option value="">选择负责团队或个人</option>
                                <optgroup label="团队">
                                    <option value="team-1">核心销售团队</option>
                                    <option value="team-2">新市场拓展团队</option>
                                </optgroup>
                                <optgroup label="个人">
                                    <option value="user-1">张三</option>
                                    <option value="user-2">李四</option>
                                    <option value="user-3">王五</option>
                                </optgroup>
                            </select>
                        </div>
                    </form>
                </div>
                <div style="padding: 15px 20px; border-top: 1px solid #eee; text-align: right;">
                    <button class="btn btn-secondary mr-2" onclick="closeTargetModal()">取消</button>
                    <button class="btn btn-primary" onclick="saveTarget()">保存</button>
                </div>
            </div>
        </div>
        
        <!-- 更新进度模态框 -->
        <div id="progressModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000;">
            <div style="background-color: white; margin: 5% auto; width: 500px; border-radius: 5px; overflow: hidden;">
                <div style="background-color: var(--primary-color); color: white; padding: 15px 20px;">
                    <h3>更新目标进度</h3>
                </div>
                <div class="modal-body" style="padding: 20px;">
                    <form id="progressForm">
                        <input type="hidden" id="progressTargetId">
                        <div class="form-group">
                            <label for="currentProgress">当前进度</label>
                            <input type="number" class="form-control" id="currentProgress" required>
                            <small class="form-text text-muted">根据目标类型输入当前已完成的数量或金额</small>
                        </div>
                        <div class="form-group">
                            <label for="progressNote">进度说明</label>
                            <textarea class="form-control" id="progressNote" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div style="padding: 15px 20px; border-top: 1px solid #eee; text-align: right;">
                    <button class="btn btn-secondary mr-2" onclick="closeProgressModal()">取消</button>
                    <button class="btn btn-primary" onclick="saveProgress()">更新</button>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            function showAddTargetModal() {
                document.getElementById('targetModalTitle').textContent = '添加销售目标';
                document.getElementById('targetForm').reset();
                document.getElementById('targetModal').style.display = 'block';
            }
            
            function editTarget(targetId) {
                document.getElementById('targetModalTitle').textContent = '编辑销售目标';
                // 在实际应用中，这里会通过API获取目标详情
                
                // 模拟填充表单数据
                if (targetId === 1) {
                    document.getElementById('targetName').value = '第三季度销售目标';
                    document.getElementById('targetDescription').value = '核心销售团队的第三季度销售额目标';
                    document.getElementById('targetType').value = '销售额';
                    document.getElementById('targetValue').value = '500000';
                    document.getElementById('targetPeriod').value = 'quarterly';
                    document.getElementById('targetDeadline').value = '2023-09-30';
                    document.getElementById('targetAssignee').value = 'team-1';
                } else if (targetId === 2) {
                    document.getElementById('targetName').value = '新客户开发目标';
                    document.getElementById('targetDescription').value = '新市场拓展团队的月度客户开发目标';
                    document.getElementById('targetType').value = '客户数';
                    document.getElementById('targetValue').value = '15';
                    document.getElementById('targetPeriod').value = 'monthly';
                    document.getElementById('targetDeadline').value = '2023-07-31';
                    document.getElementById('targetAssignee').value = 'team-2';
                }
                
                document.getElementById('targetModal').style.display = 'block';
            }
            
            function closeTargetModal() {
                document.getElementById('targetModal').style.display = 'none';
            }
            
            function saveTarget() {
                const form = document.getElementById('targetForm');
                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }
                
                const targetName = document.getElementById('targetName').value;
                const targetDescription = document.getElementById('targetDescription').value;
                const targetType = document.getElementById('targetType').value;
                const targetValue = document.getElementById('targetValue').value;
                const targetPeriod = document.getElementById('targetPeriod').value;
                const targetDeadline = document.getElementById('targetDeadline').value;
                const targetAssignee = document.getElementById('targetAssignee').value;
                
                // 在实际应用中，这里会将数据发送到服务器
                console.log({
                    name: targetName,
                    description: targetDescription,
                    type: targetType,
                    value: targetValue,
                    period: targetPeriod,
                    deadline: targetDeadline,
                    assignee: targetAssignee
                });
                
                alert("目标已保存！");
                closeTargetModal();
            }
            
            function deleteTarget(targetId) {
                if (confirm("确定要删除此销售目标吗？")) {
                    // 在实际应用中，这里会调用API删除目标
                    alert("删除目标 ID: " + targetId);
                }
            }
            
            function updateProgress(targetId) {
                document.getElementById('progressTargetId').value = targetId;
                document.getElementById('progressForm').reset();
                
                // 在实际应用中，这里会通过API获取目标当前进度
                if (targetId === 1) {
                    document.getElementById('currentProgress').value = '325000';
                } else if (targetId === 2) {
                    document.getElementById('currentProgress').value = '18';
                }
                
                document.getElementById('progressModal').style.display = 'block';
            }
            
            function closeProgressModal() {
                document.getElementById('progressModal').style.display = 'none';
            }
            
            function saveProgress() {
                const form = document.getElementById('progressForm');
                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }
                
                const targetId = document.getElementById('progressTargetId').value;
                const currentProgress = document.getElementById('currentProgress').value;
                const progressNote = document.getElementById('progressNote').value;
                
                // 在实际应用中，这里会将数据发送到服务器
                console.log({
                    targetId: targetId,
                    currentValue: currentProgress,
                    note: progressNote
                });
                
                alert("进度已更新！");
                closeProgressModal();
            }
        </script>
    </th:block>
</body>
</html> 